import {defineComponent, ref, shallowReactive, watch} from 'vue';

// 声明类型
const PropsType = {
    cdata: {
        type: Object,
        require: true
    },
    ratio: {
        type: Number,
        default: 1
    }
} as const

let myColor = ['#62dcaa', '#dca762', '#e36b8a', '#d7c24b', '#62c6dc', '#62dc6d', '#dc62b2', '#9962dc', '#62a4dc',
    '#626edc'
];

// 定义主体
export default defineComponent({
    props: PropsType,
    setup(props, {emit}) {

        const chartRef = ref(null);

        // 配置项
        let option = shallowReactive({
            grid: null,
            xAxis: null,
            yAxis: null,
            series: null,
        })

        watch(
            () => [props.cdata, props.ratio],
            (value: any) => {

                let val = value[0];
                let ratio = value[1] || 1;

                option = {
                    // backgroundColor: '#010414',
                    grid: {
                        left: '25%',
                        top: '10',
                        right: '10%',
                        bottom: '10',
                        containLabel: false

                    },
                    xAxis: [{
                        show: false,
                    }],
                    yAxis: [{
                        axisTick: 'none',
                        axisLine: 'none',
                        offset: 50 * ratio,
                        axisLabel: {
                            color: '#fff',
                            fontSize: 50 * ratio,
                            align: 'right',
                        },
                        data: ['新城区', '回民区', '玉泉区', '赛罕区', '土默特左旗', '托克托县', '和林格尔县', '清水河县', '武川县']
                    },
                        {
                            axisTick: 'none',
                            axisLine: 'none',
                            axisLabel: {
                                color: '#fff',
                                fontSize: 60 * ratio,
                                align: 'center'
                            },
                            data: ['10', '9', '8', '7', '6', '5', '4', '3', '2']
                        }, {
                            name: '单位：个',
                            nameGap: '5',
                            nameTextStyle: {
                                color: '#fff',
                                fontSize: 50 * ratio,
                            },
                            show: false,
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            },
                            data: ['10', '9', '8', '7', '6', '5', '4', '3', '2'],
                        }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        gap: 2,
                        data: [52, 60, 22, 33, 44, 78, 59, 15, 11],
                        barWidth: 20 * ratio,
                        barHight: 5 * ratio,
                        itemStyle: {
                            color: function (params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num]
                            },
                        },
                        z: 2
                    }, {
                        name: '白框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
                        barWidth: 50 * ratio,
                        itemStyle: {
                            color: '#fff',
                            borderRadius: 12,
                        },
                        z: 1
                    }, {
                        name: '外框',
                        type: 'bar',
                        yAxisIndex: 2,
                        barGap: '-100%',
                        data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
                        barWidth: 60 * ratio,
                        itemStyle: {
                            color: function (params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num]
                            },
                            borderRadius: 14,
                        },
                        z: 0
                    },
                        {
                            name: '外圆',
                            type: 'scatter',
                            emphasis: {
                                scale: false
                            },
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                            yAxisIndex: 2,
                            symbolSize: 50 * ratio,
                            itemStyle: {
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                                opacity: 1,
                            },
                            z: 2
                        }
                    ]
                }
            },
            {
                immediate: true,
                deep: true
            }
        )


        return () => {
            return <vue-echarts ref={chartRef} autoresize={true} option={option}/>
        }
    }
})
